<template>
	<view>
		<view class="container">
			<view class="flex-row row-column row-middle box" @click="scanCode">
				<u-icon name="scan" color="#06A972" size="80"></u-icon>
				<text>扫描包装盒上正品认证二维码</text>
			</view>

			<view v-if="detail.categoryId">
				<view class="img">
					<image mode="aspectFill" :src="detail.productImage"></image>
				</view>

				<view class="table" style="width: 100%;margin-bottom: 20px;">
					<view class="tr">
						<view class="td">车灯师防伪系统提醒您：你好，你所购买的产品为官方正品，请放心使用，谢谢你的支持</view>
					</view>
				</view>

			<view class="head">查询信息</view>
				<view class="table" style="width: 100%;">
					<view class="tr">
						<view class="td">产品型号</view>
						<view class="td">{{detail.productName}}</view>
					</view>
					<view class="tr">
						<view class="td">防伪编码</view>
						<view class="td">{{detail.flowCode}}</view>
					</view>
					<view class="tr">
						<view class="td">授权区域</view>
						<view class="td">{{detail.customerArea}}</view>
					</view>
					<view class="tr">
						<view class="td">出库时间</view>
						<view class="td">{{detail.outTime}}</view>
					</view>
					<view class="tr">
						<view class="td">所属客户</view>
						<view class="td">{{detail.customerName}}</view>
					</view>
					<view class="tr" v-if="detail.buyTime">
						<view class="td">出售时间</view>
						<view class="td">{{detail.buyTime}}</view>
					</view>
					<view class="tr" v-if="detail.userName">
						<view class="td">销售人员</view>
						<view class="td">{{detail.userName}}</view>
					</view>
					<!-- 					<view class="tr">
						<view class="td">查询结果</view>
						<view class="td">车灯师防伪系统提醒您：你好，你所购买的产品为官方正品，请放心使用，谢谢你的支持</view>
					</view> -->
					<!-- <view class="tr" v-for="(item, index) in detail.queryList" :key="index">
						<view class="td">第{{index + 1}}次查询</view>
						<view class="td">{{$util.dateFormat(item.createTime)}}</view>
					</view> -->
				</view>

				<view class="head">公司信息</view>
				<view class="table" style="width: 100%;">
					<view class="tr">
						<view class="td">公司名称</view>
						<view class="td">广州车灯师信息科技有限公司</view>
					</view>
					<view class="tr">
						<view class="td">联系电话</view>
						<view class="td">185-2923-3550</view>
					</view>
					<view class="tr">
						<view class="td">地址</view>
						<view class="td" style="word-break: break-word;">广东省广州市增城区创新大道48号明圣创新产业园A区4楼01号</view>
					</view>
					<view class="tr">
						<view class="td">官网</view>
						<view class="td">www.autoled.com.cn</view>
					</view>
				</view>

				<view class="head">相关说明</view>
				<view class="text">1.正品产品质保期为1年</view>
				<view class="text">2.非授权区域的产品不予保修</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapGetters
	} from "vuex";
	import {
		wxCodeDetail
	} from '@/api/common.js';
	export default {
		data() {
			return {
				flowCode: '',
				detail: {}
			}

		},

		computed: mapGetters(['isLogin', 'uid']),

		onLoad() {
			if (this.isLogin == false) {
				toLogin();
			}
		},

		onShow() {

		},

		methods: {
			scanCode() {
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							let data = [],
								flowCode = '';
							data = res.result.split("=");
							if (data.length > 1) {
								flowCode = data[1];
							} else {
								flowCode = data[0];
							}
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							wxCodeDetail({
								flowCode: flowCode,
								userInfoId: that.uid,
							}).then(res => {
								uni.hideLoading();
								that.detail = res.value;
								that.detail.queryList = that.detail.queryList.reverse()
							}).catch(err => {
								that.$util.Tips({
									title: err,
								});
							})
						} else {
							return this.$util.Tips({
								title: '请重新扫描'
							})
						}
					},
					fail: (res) => {
						this.$util.Tips({
							title: '未识别到二维码'
						})
					}
				})
			},

			saleActive() {
				let that = this;
				if (!that.flowCode) return that.$util.Tips({
					title: '请扫描正品认证二维码'
				});


				uni.showLoading({
					mask: true
				});
				wxCodeDetail({
					flowCode: that.flowCode,
					userInfoId: that.uid
				}).then(res => {
					uni.hideLoading();
					res.value
				}).catch(err => {
					that.$util.Tips({
						title: err,
					});
				})
			},

		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.container {
		padding: 20rpx 40rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.box {
		border: 1rpx solid #06A972;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 8rpx;
	}

	.box~.box {
		margin-top: 40rpx;
	}

	.pd-20 {
		padding: 20rpx 0;
	}

	.table {
		display: table;
		border-collapse: collapse;
		/* 合并边框 */
		overflow-x: auto;
		/* 宽度不能设置，要完全显示可以用 */
		word-break: keep-all;
		/* 设置不换行 */
		white-space: nowrap;
		background-color: #FFFFFF;
	}

	/*此元素会作为一个表格行显示（类似 <tr>） */
	.tr {
		display: table-row;
	}

	/* 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */
	.th {
		display: table-cell;

		line-height: 78rpx;
		text-align: center;
		border: 1rpx solid #D9D9D9;
		/* border-right: none; */
		/* border-bottom: none; */
		color: #FFFFFF;
		font-weight: 400;
		font-size: 28rpx;
		width: 145rpx;
		height: 78rpx;
		background: #3896ED;
	}

	/* 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */
	.td {
		padding: 30rpx;
		display: table-cell;
		/* height: 78rpx; */
		/* line-height: 78rpx; */
		text-align: center;
		border: 1rpx solid #DDDDDD;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		white-space: break-spaces;
		vertical-align: middle;
	}

	.img {
		padding: 20rpx 0;
		width: 160px;
		height: 160px;
		margin: 0 auto;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.head {
		padding: 50rpx 15rpx 15rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.text {
		font-size: 24rpx;
	}
</style>